<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CONVERSE匡威官方网站,美国著名帆布鞋品牌,辉煌历史创于1908年,代表永恒不灭的原创力。匡威官网独家限量发售匡威帆布鞋,板鞋,T恤衫,卫衣,外套夹克,牛仔裤,短裤,双肩包等匡威产品,街头潮流,滑板文化,匡威为你提供全面的装备。</title>

    <link rel="shortcut icon" href=" favicon.ico" />
   <link rel="stylesheet" href="./css/header.css">
   <link rel="stylesheet" href="./css/CONVERSE.css">
    <link
      rel="stylesheet"
      href="http:////at.alicdn.com/t/font_2733095_f9zf7yqw5l.css"
    />
    <style>
        .main{
    width: 100%;
    height: 325px;
    /* background-color: blue; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
}

.main>div:nth-of-type(1){
    width: 47%;
    height: 100%;
    /* background-color: chartreuse; */
    border-right: 1px solid gray;
}
.main>div:nth-of-type(1)>p:nth-of-type(1){
    position: absolute;
    top: 135px;
    left: 31%;
    font-size: 20px;
}
.main>div:nth-of-type(1)>p:nth-of-type(2){
    width: 118px;
    height: 36px;
    background-color: black;
    color: #fff;
    line-height: 36px;
    text-align: center;
    margin-top: 20px;
    position: absolute;
    top: 160px;
    left: 30%;
    font-size: 20px;
}
.main>div:nth-of-type(2){
    width: 60%;
    height: 100%;
    /* background-color: red; */
}
.main>div:nth-of-type(2)>div{
    width: 300px;
    height: 500px;
    /* background-color: gray; */
    padding-left: 85px;
}
.main>div:nth-of-type(2)>div>p:nth-of-type(1){
    position: absolute;
    top: 135px;
    left: 49.5%;
    font-size: 25px;
}
.ipt1{
    width: 300px;
    height: 40px;
    border: #000 solid 1px;
    text-align: center;
    margin-top: 60px;
}
.ipt2{
    width: 300px;
    height: 40px;
    border: #000 solid 1px;
    text-align: center;
    margin-top: 10px;
}
.ipt3{
    width:150px;
    height: 40px;
    border: red solid 1px;
    text-align: center;
    margin-top: 10px;
}
/* .ipt4{
    width: 110px;
    height: 40px;
    background-color: red;
    border: #000 solid 1px;
    text-align: center;
    margin-top: 10px;
    position: absolute;
    left: 933px;
    top: 294px;
} */
.code {
        width: 110px;
        height: 40px;
        border: #000 solid 1px;
        text-align: center;
        margin-top: 10px;
        position: absolute;
        left: 933px;
        top: 294px;
        line-height: 40px;
      }
.ipt6{
    width: 300px;
    height: 40px;
    border: #000 solid 1px;
    text-align: center;
    margin-top: 10px;
    background-color: #ccc;
}
.main>div:nth-of-type(2)>div>p:nth-of-type(2){
    padding-left: 240px;
}
    </style>
  </head>
  <body>
    <!-- 头部 -->
  
    <div class="header">
    <div class="header-content">
        <a href="http://127.0.0.1/kv/CONVERSE.html">
        <i class="iconfont icon-CONVERSELOGO"></i> 
        </a>
        <span> 
            <a href="http://127.0.0.1/kv/help.html">
                <i class="iconfont icon-bangzhu"></i> </a>
        </span>
        <span>
        <i class="iconfont icon-sousuo"></i>
        </span>
        <span>
        <i class="iconfont icon-liaotian"></i> 
        </span>
        <span>
        购物车
        </span>
        
        <span>
        <i class="iconfont icon-denglu"></i> 
        </span>
        <span style="margin-right: -40px;"><a href="http://127.0.0.1/kv/login.html">登录 /</a> <a href="http://127.0.0.1/kv/register.html">注册</a></span>
    </div>
    <div class="header-box"></i></div>
    </div>
    <div class="main">
        <div>
            <p>还未注册？</p>
            <p>注册账户&gt;</p>
        </div>
        <div>
            <div>
                <p>已成为会员？</p>
                <input class="ipt1" type="text" placeholder="邮箱/手机" id="uName">
                <input class="ipt2" type="text" placeholder="账户密码" id="uPwd">
                    <input type="text" id="inputCode" style="float: left" class="ipt3"/>
                    <div id="checkCode" class="code" onclick="createCode(4)" class="ipt4"></div>
                    <span onclick="createCode(4)" style="padding-left: 240px">换一张</span>
                <input class="ipt5" type="checkbox">一旦登录，即表明您同意匡威更新的<a href="">隐私政策</a>和<a href="">使用规则</a>
                <input type="submit" value="登录" class="loginBtn ipt6 "/>
                  
            </div>
        </div>
    </div>
</body>
</html>
<script src="./jQuery.js"></script>
<script src="./ajax.js"></script>
<script>
        //页面加载时，生成随机验证码
        window.onload = function () {
          createCode(4);
        };
      
        //生成验证码的方法
        function createCode(length) {
          var code = "";
          var codeLength = parseInt(length); //验证码的长度
          var checkCode = document.getElementById("checkCode");
          ////所有候选组成验证码的字符，当然也可以用中文的
          var codeChars = new Array(
            0,
            1,
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9,
            "a",
            "b",
            "c",
            "d",
            "e",
            "f",
            "g",
            "h",
            "i",
            "j",
            "k",
            "l",
            "m",
            "n",
            "o",
            "p",
            "q",
            "r",
            "s",
            "t",
            "u",
            "v",
            "w",
            "x",
            "y",
            "z",
            "A",
            "B",
            "C",
            "D",
            "E",
            "F",
            "G",
            "H",
            "I",
            "J",
            "K",
            "L",
            "M",
            "N",
            "O",
            "P",
            "Q",
            "R",
            "S",
            "T",
            "U",
            "V",
            "W",
            "X",
            "Y",
            "Z"
          );
          //循环组成验证码的字符串
          for (var i = 0; i < codeLength; i++) {
            //获取随机验证码下标
            var charNum = Math.floor(Math.random() * 62);
            //组合成指定字符验证码
            code += codeChars[charNum];
          }
          if (checkCode) {
            //为验证码区域添加样式名
            checkCode.className = "code";
            //将生成验证码赋值到显示区
            checkCode.innerHTML = code;
          }
        }
      
        //检查验证码是否正确
        function validateCode() {
          //获取显示区生成的验证码
          var checkCode = document.getElementById("checkCode").innerHTML;
          //获取输入的验证码
          var inputCode = document.getElementById("inputCode").value;
          //console.log(checkCode);
          //console.log(inputCode);
          if (inputCode.length <= 0) {
            alert("请输入验证码！");
          } else if (inputCode.toUpperCase() != checkCode.toUpperCase()) {
            alert("验证码输入有误！");
            createCode(4);
          } else {
            alert("验证码正确！");
          }
        }
      </script>
  